أساسيات إطار عمل Foundation: التعامل مع الصور والفيديو

يُعد إطار العمل Foundation من أبرز أدوات تطوير الواجهات الأمامية، ويتميز بمرونته العالية وقابليته للتخصيص ودعمه الكامل للتصميم المتجاوب، مما يجعله خيارًا مثاليًا لبناء مواقع وتطبيقات ويب حديثة ومتعددة الأجهزة. من أهم الركائز التي يعتمد عليها هذا الإطار في تصميم واجهات المستخدم هي الوسائط المتعددة، وبالأخص الصور ومقاطع الفيديو، إذ يُعد عرض هذه العناصر وإدارتها بطريقة فعالة وجذابة جزءًا جوهريًا من تجربة المستخدم.

في هذا السياق، يوفّر Foundation مجموعة متكاملة من الأدوات والمكونات التي تسهّل التعامل مع الصور والفيديوهات داخل صفحات الويب، مع مراعاة التوافق الكامل مع شاشات الأجهزة المختلفة، بالإضافة إلى دعم خصائص الوصول وتحسينات الأداء وتجربة التصفح. يتناول هذا المقال الطويل الجوانب التقنية والوظيفية لتكامل الصور والفيديو في Foundation، ويُحلّل الآليات المختلفة التي يقدّمها هذا الإطار لدعم هذه الوسائط.

التعامل مع الصور في Foundation

الصور المتجاوبة (Responsive Images)

يتعامل Foundation مع الصور بطريقة مرنة تتكيّف مع حجم الشاشة، ما يُعرف بمبدأ التصميم المتجاوب. ولتحقيق هذا الهدف، يعتمد Foundation على عدد من الحلول التقنية، من بينها:

• كلاس .responsive-img: عند إضافة هذا الكلاس إلى أي صورة داخل صفحة HTML، يتم تقييد عرض الصورة داخل الحاوية الأساسية وتعديل حجمها تلقائيًا بحسب حجم الشاشة، دون أن يتأثر التناسب بين الأبعاد الأصلية للصورة.

  html
  CopyEdit
  <img src="image.jpg" alt="صورة توضيحية" class="responsive-img">
  

• نسبة العرض إلى الارتفاع Aspect Ratio: يدعم Foundation ميزة الحفاظ على نسبة العرض إلى الارتفاع للصورة من خلال الحاويات النسبية (Aspect Ratio Containers)، بحيث يمكن وضع الصورة داخل عنصر يحتفظ بالنسبة مهما تغيّر حجم الشاشة. هذه الميزة حيوية خصوصًا عند التعامل مع الصور ذات الأبعاد الدقيقة أو الصور المضمّنة ضمن عناصر أخرى كالبطاقات أو الشرائح.

الصور المصغّرة Thumbnails

يوفّر Foundation أيضًا مكونًا خاصًا بالصور المصغّرة، يتم استخدامه غالبًا في المعارض أو قوائم الصور. تتيح هذه الصور عرض نسخة مصغّرة قابلة للنقر عليها لتكبيرها أو فتحها ضمن نافذة منبثقة أو معرض تفاعلي.

html
CopyEdit
<ul class="clearing-thumbs small-block-grid-4" data-clearing>
  <li><a href="img1_large.jpg"><img src="img1_thumb.jpg">a>li>
  <li><a href="img2_large.jpg"><img src="img2_thumb.jpg">a>li>
ul>

يتم هنا استخدام ميزة Clearing Lightbox التي توفر نافذة عرض أنيقة للصور مع أدوات تصفح، وقد تمت إزالتها في الإصدارات الحديثة من Foundation، لكن يمكن تعويضها باستخدام مكونات أخرى أو مكتبات خارجية مثل Lightbox2 مع دمجها بسهولة داخل هيكل Foundation.

الصور كخلفية

يتعامل Foundation مع الصور ليس فقط كعناصر مباشرة (img)، بل أيضًا كخلفيات لعناصر الصفحة. يمكن التحكم الكامل بعرض الخلفية وتموضعها باستخدام أنظمة الشبكة Grid و Flexbox المدمجة في Foundation، مع الاستفادة من خواص CSS مثل:

css
CopyEdit
.hero-section {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
}

ويمكن دمج هذه الخلفية مع العناصر البصرية الأخرى (نصوص، أزرار، شرائح…) مع الحفاظ على قابلية التفاعل في التصميم المتجاوب.

التعامل مع الفيديو في Foundation

تُعد مقاطع الفيديو من الوسائط المتقدمة التي تتطلب إدارة دقيقة في واجهات المستخدم، خصوصًا من حيث الحجم، التوافق مع الأجهزة، السرعة، والتنسيق. يقدّم Foundation آليات فعالة لعرض الفيديوهات سواء عبر تضمين ملفات محلية أو مقاطع من YouTube وVimeo.

الفيديوهات المتجاوبة Responsive Videos

لضمان عرض مقاطع الفيديو بشكل مناسب عبر مختلف الأجهزة، يستخدم Foundation كلاسًا مخصصًا يُعرف باسم .responsive-embed. يتم وضع مقطع الفيديو داخل عنصر

html
CopyEdit
<div class="responsive-embed widescreen">
  <iframe src="https://www.youtube.com/embed/xyz123" frameborder="0" allowfullscreen>iframe>
div>

html
CopyEdit
<video controls class="responsive-embed">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="ar" label="العربية">
  المتصفح لا يدعم الفيديو.
video>

html
CopyEdit
<a data-open="videoModal">شاهد الفيديوa>

<div class="reveal" id="videoModal" data-reveal>
  <div class="responsive-embed widescreen">
    <iframe src="https://player.vimeo.com/video/12345678" frameborder="0" allowfullscreen>iframe>
  div>
div>